<style>
  .container {
    margin: 300px auto;
    display: flex;
    width: 300px;
    overflow: hidden;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 6.5px 6.2px 42px -11px rgba(0, 0, 0, 0.16),
      4.7px 4.4px 56.4px -11px rgba(0, 0, 0, 0.074),
      2.2px 2.1px 70.9px -11px rgba(0, 0, 0, 0.016),
      1.3px 1.2px 92.5px -11px rgba(0, 0, 0, -0.02),
      4.7px 4.4px 125.5px -11px rgba(0, 0, 0, -0.035),
      39px 37px 174px -11px rgba(0, 0, 0, -0.029);
  }
  .content {
    overflow: hidden;
    line-height: 1.5;
    max-height: 4.5em;
    position: relative;
    text-align: justify;
    transition: 0.4s max-height;
  }

  .label_ {
    position: relative;
    float: right;
    clear: both;
    margin-left: 20px;
    font-size: 14px;
    padding: 0 8px;
    background-color: #26caf8;
    line-height: 24px;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
  }
  .label_::after {
    content: "展开";
  }

  .check_box {
    display: none;
  }

  .check_box:checked + .content {
    max-height: 1200px;
  }

  .check_box:checked + .content .label_::after {
    content: "收起";
  }
  .content::before {
    content: "";
    height: calc(100% - 24px);
    float: right;
  }

  .label_::before {
    content: "...";
    position: absolute;
    left: -5px;
    color: #333;
    transform: translateX(-100%);
  }
</style>
<body translate="no">
  <div class="container">
    <input
      id="checkBox"
      onclick="handleToggle(this)"
      class="check_box"
      type="checkbox"
    />
    <div class="content">
      <label class="label_" for="checkBox"></label>
      当你打开窗帘，阳光洒进房间
      当你打开窗帘，阳光洒进房间，伴随着微风和鸟儿的歌声，你仿佛置身于一个神奇的世界。这个世界有山有水，有花有草，有星空和月亮。在这个美丽的世界里，一切看似都是那么完美无缺，生命也因此变得如此宝贵。
      然而，生命不只是美好的瞬间，更是磨难与挫折的历程。我们会遭遇失败和失落，但这正是让我们成长和变得更强大的机会。所以，当你感到困惑和失望时，不要放弃，相信自己的力量，继续前行。
      人生就像一场奇妙的旅程，充满了不同的经历和故事。有些人选择沿着已知的道路前行，而有些人则冒险探索未知的领域。无论你选择哪种方式，重要的是你要勇敢地面对每一个挑战，珍惜每一次机会，享受旅途中的每一刻。
      最后，记得与人分享你的喜悦和快乐，用真诚的心态对待周围的人和事。生命无常，珍惜当下，并为未来打造更美好的明天。
    </div>
  </div>
</body>
<script>
  window.onload = () => {
    const text = document.querySelector(".content");
    const label = document.querySelector(".label_");
    if (text.scrollHeight <= text.clientHeight) {
      label.style.display = "none";
    }
  };

  function handleToggle(e) {
    let before = document.querySelector(".label_::before");
    if (e.checked) {
      document.styleSheets[0].addRule(".label_::before", "content:''");
    } else {
      document.styleSheets[0].addRule(".label_::before", "content:'...'");
    }
  }
</script>
